<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!-- 1- 引入axios库，该库提供一个名字为axios的方法	-->
	<script src="./lib/axios.min.js"></script>
</head>
<body>
	<button>get</button>
	<button>post</button>
	<button>put</button>
	<button>patch</button>
	<button>delete</button>
</body>
<script>
	// delete get 语法相同
	// put patch post语法相同
	const btns = document.querySelectorAll("button");
	btns[0].onclick = async function(){
		// axios是一个方法（方法也是一个对象）
		// 1- 发送get请求
		// 第一个参数是请求地址
		// const result = axios.get("http://zhangpeiyue.com/scoreList");
		// result.then(value=>{
		// 	console.log(value.data);// 响应体
		// })
		
		// 2- 发送get请求携带查询字符串1
		// 未解构赋值
		// const result = await axios.get("http://zhangpeiyue.com/scoreList?age=12&sex=男");
		// console.log(result.data);
		
		// 解构赋值
		// const {data} = await axios.get("http://zhangpeiyue.com/scoreList?age=12&sex=男");
		// console.log(data);
		
		// 3- 发送get请求携带查询字符串2
		// 第一个参数是请求地址，第二个参数是配置项（对象）
		// const {data} = await axios.get("http://zhangpeiyue.com/scoreList",{
		// 	// 最终会将params对象转为查询字符串并与请求地址拼接。
		// 	params:{
		// 		age:12,
		// 		sex:"男"
		// 	}
		// });
		// console.log(data);
		
		// 4- 完整写法
		// 直接调用axios,接收的第一个参数即是配置对象
		// axios({
		// 	// 配置请求方式，如果省略默认为GET请求
		// 	// method:"get",
		// 	// 请求地址
		// 	url:"http://zhangpeiyue.com/scoreList",
		// 	params:{
		// 		age:12,
		// 		sex:"男"
		// 	}
		// }).then(({data})=>{
		// 	console.log(data);
		// })
		
		// 第二个参数是配置对象
		// axios.get("http://zhangpeiyue.com/scoreList",{
		// 	params:{
		// 		age:12
		// 	},
		// 	// 请求头
		// 	headers:{
		// 		userName:"lisi"
		// 	},
		// 	// 配置请求方式，在当前环境下不起作用。
		// 	// method:"post"
		//
		// 	// 完整地址：以协议开头的地址
		// 	// 设置基础地址。（如果请求的地址为非完整地址,会对地址进行拼接）,如果为完整地址，那么此项可以忽略。
		// 	// 如果请求地址为 /scoreList,那么拼接合为：https://www.baidu.com/A/scoreList
		// 	// baseURL:"https://www.baidu.com/A"
		//
		// 	timeout:1000,// 指定请求的超时时间
		// }).then(value=>{
		// 	console.log("响应体",value.data);
		// }).catch(err=>{
		// 	console.log(err);
		// })
		
		// 第一个参数是配置对象
		// axios({
		// 	method:"get",// 如果省略默认为get
		// 	url:"http://zhangpeiyue.com/scoreList",
		// 	params:{
		// 		age:12
		// 	},
		// 	headers:{
		// 		userName:"lisi"
		// 	},
		// 	timeout:1000
		// }).then(value=>{
		// 	console.log("响应体",value)
		// }).catch(reason=>{
		// 	console.log("异常：",reason.message)
		// })
		
		
	}
	btns[1].onclick = async function(){
		// 1- 第一个参数是请求地址，第二个参数是请求体，第三个参数是配置对象
		// 第二个参数：如果是字符串，请求头Content-type的值会被设置为application/x-www-form-urlencoded
		// const result = await axios.post("/scoreList","a=1&b=2",{
		// 	baseURL:"http://zhangpeiyue.com",
		// 	params:{
		// 		id:100
		// 	},
		// 	headers:{
		// 		a:1,
		// 		b:2
		// 	}
		// 	// timeout:1000
		// });
		// console.log(result.data);
		
		// 2- 第二个参数：如果是对象，请求头Content-type的值会被设置为application/json
		// axios.post("http://zhangpeiyue.com/scoreList",{userName:"lala",age:100},{
		// 	headers:{
		// 		a:1,
		// 		b:2
		// 	}
		// }).then(value=>{
		// 	console.log(value.data);
		// })
		
		// 3- 完整（通用）
		axios({
			method:"post",
			url:"http://zhangpeiyue.com/scoreList",
			// 请求体,请求头Content-Type设置为application/x-www-form-urlencoded
			// data:"a=1&b=2"
			
			// 请求体,请求头Content-Type设置为application/json
			data:{
				id:100,
				type:2
			}
		}).then(value=>{
			console.log(value.data);
		})
	}
	btns[2].onclick = function(){
		// axios.put("http://zhangpeiyue.com/scoreList/1",{a:1,b:2});
		axios({
			method:"put",
			url:"http://zhangpeiyue.com/scoreList/2",
			data:"a=100&b=200"
		})
	}
	btns[3].onclick = function(){
		axios.patch("http://zhangpeiyue.com/scoreList/3",{age:5},{
			params:{
				a:1,
				b:2
			}
		})
	}
	btns[4].onclick = function(){
		// axios.delete("http://zhangpeiyue.com/scoreList/3");
		// axios.delete("http://zhangpeiyue.com/scoreList/1",{
		// 	params:{
		// 		a:1,
		// 		b:2
		// 	}
		// });
		
		axios({
			method:"delete",
			url:"http://zhangpeiyue.com/scoreList/2"
		})
	}
</script>
</html>